<template>
  <vxe-grid
    border
    ref="xTable"
    show-overflow
    stripe
    size="mini"

    :pager-config="tablePage"
    :columns="tableColumn"
    :toolbar="tableToolbar"
    @page-change="handlePageChange"
    @toolbar-button-click="toolbarButtonClickEvent"
  ></vxe-grid>
</template>

<script>
import XEUtils from "xe-utils";
import { findSlaveData } from "@/components/js/db";
// import XEAjax from "xe-ajax";
// import hljs from "highlight.js";

function Columnfield(data) {
  let Column = [];
  Column.push({
    type: "index",
    title: "索引",
    width: 50
  });
  for (let k in data) {
    let config = {};
    // console.log(k);
    config.field = "data." + k;
    config.title = k;
    config.formatter = "toString";
    Column.push(config);
  }
  Column.push({
    field: "date",
    title: "日期",
    formatter: "toDateString"
  });

  return Column;
}

export default {
  data() {
    return {

      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },

      tableToolbar: {
        buttons: [
          {
            code: "reloadColumn",
            name: "刷新数据"
          },

          {
            code: "removeall",
            name: "清空数据"
          },
          {
            code: "export",
            name: "导出.csv"
          }
        ],
        refresh: true,
        setting: true
      },

      tableColumn: [],
      tableData: []
    };
  },
  mounted() {
  
    this.findColumn()
  },
  methods: {
    // 初始化表头
    async findColumn() {
      // console.log("start findColumn")
      await findSlaveData().then(doc=>{
        
          this.tableData = JSON.parse(JSON.stringify(doc));
      })

      if(this.tableData.length === 0){
           console.log("db_data NULL", this.tableData)
           this.$refs.xTable.loadData(this.tableData);
           this.tableColumn = Columnfield([]);
           return;
      }
     
      this.tableColumn = Columnfield((this.tableData)[0].data);

      this.tablePage.total = this.tableData.length;

      if (this.$refs.xTable) {
        let start = (this.tablePage.currentPage - 1) * this.tablePage.pageSize;
        let end = start + this.tablePage.pageSize;
        this.$refs.xTable.loadData(this.tableData.slice(start, end));
      }

    },
    exportCsvEvent() {
      this.$refs.xTable.exportCsv({
        filename: "data.csv",
        original: true,
        isHeader: true,
        data: this.tableData.map(row => {
          row.date = XEUtils.toDateString(row.date, "yyyy-MM-dd HH:mm:ss");
          return row;
        })
      });
    },
    delData() {
      this.$db.slavedata.remove(
        {},
        {
          multi: true
        },
        (err, doc) => {
          if (err) {
            console.error(eer);
            return;
          }
          this.tableData = []
          this.$refs.xTable.loadData(this.tableData);
           
           this.tablePage.total = this.tableData.length;
          console.log(doc);
        }
      );
    },
    formatterDate({ cellValue }) {
      return XEUtils.toDateString(cellValue, "yyyy-MM-dd HH:mm:ss");
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
      if (this.$refs.xTable) {
        let start = (this.tablePage.currentPage - 1) * this.tablePage.pageSize;
        let end = start + this.tablePage.pageSize;
        this.$refs.xTable.loadData(this.tableData.slice(start, end));
      }
    },
    toolbarButtonClickEvent({ button }, event) {
      switch (button.code) {
        case "reloadColumn":
          this.findColumn();
          break;
        case "export":
          this.exportCsvEvent();
          break;
        case "removeall":
          this.delData();
          break;
      }
    }
  }
};
</script>
